<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Type Ahead 👀</title>
    <style>
        html {
            box-sizing: border-box;
            background: hsla(193, 30%, 64%, 0.78);
            font-family: 'Kaiti', 'SimHei', 'Hiragino Sans GB ', 'helvetica neue';
            font-size: 20px;
            font-weight: 200;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        input {
            width: 100%;
            padding: 20px;
            font-family: 'Kaiti', 'helvetica neue';
        }

        .search-form {
            max-width: 700px;
            margin: 50px auto;
        }

        input.search {
            margin: 0;
            text-align: center;
            outline: 0;
            border: 10px solid #F7F7F7;
            width: 120%;
            left: -10%;
            position: relative;
            top: 10px;
            z-index: 2;
            border-radius: 5px;
            font-size: 40px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
        }


        .suggestions {
            margin: 0;
            padding: 0;
            position: relative;
            /*perspective:20px;*/
        }

        .suggestions li {
            background: white;
            list-style: none;
            border-bottom: 1px solid #D8D8D8;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
            margin: 0;
            padding: 20px;
            transition: background 0.2s;
            display: flex;
            justify-content: center;
            text-transform: capitalize;
        }

        .suggestions li:nth-child(even) {
            transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
            background: linear-gradient(to bottom, #ffffff 0%, #EFEFEF 100%);
        }

        .suggestions li:nth-child(odd) {
            transform: perspective(100px) rotateX(-3deg) translateY(3px);
            background: linear-gradient(to top, #ffffff 0%, #EFEFEF 100%);
        }

        span.population {
            font-size: 15px;
        }

        span.info {
            display: flex;
            flex-direction: column;
        }

        span.author,
        span.title {
            font-size: .8em;
            /*		right: 0;*/
        }

        span.title {
            color: #7c8e94;
            position: absolute;
            right: 5px;
            bottom: 1px;
        }

        .details {
            text-align: center;
            font-size: 15px;
        }

        .hl {
            background: hsla(193, 37%, 64%, 0.65);
        }

        .love {
            text-align: center;
        }

        a {
            color: black;
            background: rgba(0, 0, 0, 0.1);
            text-decoration: none;
        }
    </style>
</head>

<body>

    <form class="search-form">
        <input type="text" class="search" placeholder="诗句 诗名 诗人">
        <ul class="suggestions">
            <li>输入词句，找一首诗</li>
            <li></li>
        </ul>
    </form>
    <script>
        const search = document.querySelector('.search');
        const suggestions = document.querySelector('.suggestions');

        const endpoint = 'https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json';

        const poetrys = []; // 存储返回的JSON数组信息

        fetch(endpoint)
            .then(res => res.json()) // 返回Promise对象, json存在PromiseResult中, 还需要一个then将其取出
            .then(res => poetrys.push(...res)); // 返回数组, 存信息

        // 匹配诗句/诗名/诗人的方法
        function findMatches(input) {
            return poetrys.filter(poet => {
                const reg = new RegExp(input, 'g');
                const author = poet.detail_author.join(''); // 诗人存在数组中, 需要转换成字符串
                // 使用match是为了下面替换高亮的标签
                return poet.detail_text.match(reg) || poet.title.match(reg) || author.match(reg);
            });
        }

        // 增加列表
        function displayMatches() {
            // const value = '王';
            const value = this.value;
            const matches = findMatches(value);
            // 清空输入框时, 恢复原状态
            if (value === '') {
                suggestions.innerHTML = `<li>输入词句，找一首诗</li>
            <li></li>`;
                return;
            }
            // 匹配项推入li列表
            const html = matches.map(poet => {
                // 替换高亮的标签
                const text = poet.detail_text.replace(value, `<span class="hl">${value}</span>`);
                const title = poet.title.replace(value, `<span class="hl">${value}</span>`);
                // 诗人存在数组中, 用join方法或下标取出
                const author = poet.detail_author[0].replace(value, `<span class="hl">${value}</span>`);
                // 直接替换html代码
                return `
				<li>
					<span class="poet">${text}</span>
					<span class="title">${title} - ${author}</span>
				</li>
			`;
            });
            suggestions.innerHTML = html.join('');
        }

        search.addEventListener('keyup', displayMatches);
    </script>
</body>

</html>